<template>
	<div>
		<!-- 轮播图 -->
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in lunbotuList" :key="item.url">
				<img :src="item.url" />
			</mt-swipe-item>
		</mt-swipe>

		<!-- 6宫格 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/newsList">
					<span class="mui-icon mui-icon-location"></span>
					<div class="mui-media-body">新闻资讯</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/">
					<span class="mui-icon mui-icon-image"></span>
					<div class="mui-media-body">图片分享</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/">
					<span class="mui-icon-extra mui-icon-extra-new"></span>
					<div class="mui-media-body">商品购买</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/">
					<span class="mui-icon mui-icon-chat"></span>
					<div class="mui-media-body">留言反馈</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/">
					<span class="mui-icon mui-icon-videocam"></span>
					<div class="mui-media-body">视频专区</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/">
					<span class="mui-icon mui-icon-phone"></span>
					<div class="mui-media-body">联系我们</div>
				</router-link>
			</li>
		</ul>
		
	</div>
</template>

<script>
	import {
		Toast
	} from "mint-ui";
	export default {
		data() {
			return {
				lunbotuList: [{
						url: "/src/image/菜叶背景.jpg",
						img: "/src/image/cbd.jpg"
					},
					{
						url: "/src/image/瓦松.jpg",
						img: "/src/image/muwu.jpg"
					},
					{
						url: "/src/image/野桃花.jpg",
						img: "/src/image/shuijiao.jpg"
					}
				]
			};
		},
		created() {
			this.getLunbotu();
		},
		methods: {
			getLunbotu() {
				// this.$http.get('www.baidu.com').then(result => {

				// });
			}
		}
	}
</script>

<style scoped="scoped">
	.mint-swipe {
		height: 200px;
	}

/* 	.mint-swipe-item:nth-child(1) {
		background-color: red;
	}

	.mint-swipe-item:nth-child(2) {
		background-color: yellow;
	}

	.mint-swipe-item:nth-child(3) {
		background-color: blue;
	}
 */
	img {
		width: 100%;
		height: 100%;
	}
	.mui-grid-view.mui-grid-9 {
		background-color: white;
		border: none;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: none;
	}
</style>
